<style>
    .ivu-table th {
        /* 《审核合格区》表头 */
        background-color: rgba(255, 232, 134, .3);
    }
    
    .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
    .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
        /* 表格隔行 */
        background-color: rgba(255, 232, 134, .1);
    }
    /* 按钮及搜索框部分 */
    
    .ivu-btn-info {
        /* 查看资料按钮 */
        color: #fff !important;
        background-color: #28cca0;
        border-color: #28cca0 !important;
    }
    
    .ivu-btn {
        /* 此页面所有按钮 */
        color: #6b68ed;
        border: 2px solid #ffe986;
    }
    
    .ivu-input {
        /* 输入框 */
        border: 2px solid #ffe986;
    }
    
    .ivu-input-search i {
        /* 搜索框的i图标 */
        color: #ffe985;
    }
</style>

<div id="audit" style="background: #fff;padding: 24px;margin-bottom: 140px;">
    <i-button icon="md-done-all" @click="handleSelectAll(status)">全选</i-button>
    <i-button type="info" @click="check">查看资料</i-button>

    <!-- 搜索框 -->
    <div style="width: 300px;float: right;">
        <i-input search enter-button placeholder="姓名或证件号搜索" v-model="searchkey" />
    </div>
    <!-- 刷新 -->
    <div style="float: right;margin-right: 5px;">
        <i-button @click="getData" icon="md-refresh">刷新</i-button>
    </div>

    <Modal v-model="showModal1" title="信息与资料" width="1000">
        <div v-if="haveOptionsData.length>0">
            <i-form label-position="right" :label-width="100" :inline="true">
                <form-item label="姓名:">
                    <i-input v-model="showOneInfo.name" disabled>
                    </i-input>
                </form-item>
                <form-item label="车主身份:">
                    <i-input v-model="showOneInfo.person_type" disabled>
                    </i-input>
                </form-item>
                <form-item label="证件号:">
                    <i-input v-model="showOneInfo.certificate_id" disabled>
                    </i-input>
                </form-item>
                <form-item label="手机号:">
                    <i-input v-model="showOneInfo.phone" disabled>
                    </i-input>
                </form-item>
                <form-item label="所属单位:">
                    <i-input v-model="showOneInfo.unit" disabled>
                    </i-input>
                </form-item>
                <form-item label="电动车牌照:">
                    <i-input v-model="showOneInfo.plate" disabled>
                    </i-input>
                </form-item>
                <form-item label="所在校区:">
                    <i-input v-model="showOneInfo.campus" disabled>
                    </i-input>
                </form-item>
                <form-item label="住址:">
                    <i-input v-model="showOneInfo.room" disabled>
                    </i-input>
                </form-item>
                <form-item label="申请时间:">
                    <i-input v-model="showOneInfo.apply_time" disabled>
                    </i-input>
                </form-item>
            </i-form>
            <i-form :inline="true" :label-width="120">
                <form-item label="颁发骑行证类型:">
                    <i-input v-model="showOneInfo.passport_type" disabled>
                    </i-input>
                </form-item>
            </i-form>
            <div style="display: flex;justify-content: space-between;">
                <div>
                    <div>牌照证明:</div>
                    <a v-if="showOneInfo.licenseTag_path!=''" :href="showOneInfo.licenseTag_path" target="view_window">
                        <img style="width: 300px;height: auto;" :src="showOneInfo.licenseTag_path">
                    </a>
                    <a v-if="showOneInfo.licenseTag_path==''" href="images/404notFound.png" target="view_window">
                        <img style="width: 300px;height: auto;" src="images/404notFound.png">
                    </a>
                    <!-- <iframe :src="showOneInfo.licenseTag_path" frameborder="0" height="400" width="300"></iframe> -->
                </div>
                <div>
                    <div>车主身份证明:</div>
                    <a :href="showOneInfo.identification_paper_path" target="view_window"><img style="width: 300px;height: auto;" :src="showOneInfo.identification_paper_path"></a>
                    <!-- <iframe :src="showOneInfo.identification_paper_path" frameborder="0" height="400"
                        width="300"></iframe> -->
                </div>
                <div>
                    <div>车子来历证明:</div>
                    <a :href="showOneInfo.origin_evidence_path" target="view_window"><img style="width: 300px;height: auto;" :src="showOneInfo.origin_evidence_path"></a>
                    <!-- <iframe :src="showOneInfo.origin_evidence_path" frameborder="0" height="400" width="300"></iframe> -->
                </div>
            </div>
        </div>
        <Page ref="pages" :current="1" :total="haveOptionsData.length" :page-size="1" simple style="text-align: center;" @on-change="changePage" />

        <div slot="footer">
            <i-button @click="cancel">取消</i-button>
        </div>
    </Modal>
    <div style="margin-top: 20px;">
        <i-col>
            <!-- 加载动效 -->
            <Spin fix v-if="spinShow">
                <div style="height:110px"><img class="loadImg spin-icon-load" src="images/轮.png"></div>
                <p style="color: #999999;">请求数据中</p>
            </Spin>

            <!-- 表格 -->
            <i-table height="500" stripe border ref="selection" :columns="infoColumns" :data="showinfo" @on-selection-change="whichSelect"></i-table>
        </i-col>
    </div>
</div>
<script>
    new Vue({
        el: "#audit",
        data: {
            showModal1: false,
            status: false,
            searchkey: '',
            infoColumns: [{
                type: 'selection',
                width: 60,
                align: 'center'
            }, {
                title: '姓名',
                key: 'name',
                width: 90
            }, {
                title: '人员类别',
                key: 'person_type',
                width: 120,
                filters: [{
                    label: '学生',
                    value: '学生'
                }, {
                    label: '教工',
                    value: '教工'
                }, {
                    label: '合同工',
                    value: '合同工'
                }],
                filterMethod(value, row) {
                    return row.person_type.indexOf(value) > -1;
                }
            }, {
                title: '证件号',
                key: 'certificate_id',
                width: 180
            }, {
                title: '申请时间',
                key: 'apply_time',
                sortable: 'true',
                width: 200
            }, {
                title: '所属单位',
                key: 'unit'
            }, {
                title: '牌照',
                key: 'plate',
                width: 100,
            }, {
                title: '所在校区',
                key: 'campus'
            }, {
                title: '住址',
                key: 'room'
            }],
            showinfo: [],
            info: [],
            spinShow: true,
            haveOptionsData: [],
            showOneInfo: {},
        },
        methods: {
            handleSelectAll(status) {
                this.$refs.selection.selectAll(!status);
                this.status = !status;
            },
            check() {
                var that = this;
                if (that.haveOptionsData.length != 0) {
                    that.showModal1 = true;
                } else {
                    that.$Notice.warning({
                        title: '请选中至少一条记录查看',
                        duration: 1.5
                    });
                }

            },
            whichSelect(haveOptions) {
                this.haveOptionsData = haveOptions;
                console.log(this.haveOptionsData);
            },
            // next() {
            //     this.modal_loading = true;
            //     this.modal_loading = false;
            // },
            cancel() {
                // 关闭对话框
                this.showModal1 = false;

                // 重置当前页面为第一页
                this.$refs['pages'].currentPage = 1;
                // 重置显示的数据
                this.showOneInfo = this.haveOptionsData[this.$refs['pages'].currentPage - 1];

            },
            changePage(page) {
                // console.log(page);
                this.passport_type = '';
                // 当前页的展示对象
                this.showOneInfo = this.haveOptionsData[page - 1];

            },
            getData() {
                var that = this;
                that.info.splice(0, that.info.length); //清空数组 
                that.spinShow = true;
                that.$Loading.start();
                $.ajax({
                    url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/select',
                    data: {
                        audit_status: 1
                    },
                    type: 'post',
                    success(res) {
                        if (res.error_code == 0) {
                            console.log(res.msg);
                            that.info = res.data;
                            console.log(that.info);
                            //初始化
                            first = function(callback) {
                                var c1 = new cloud.Cloud({
                                    //必填，表示是未登录模式
                                    identityless: true,
                                    //资源方 AppID
                                    resourceAppid: 'wx9653090528b58f4d',
                                    //资源方环境 ID
                                    resourceEnv: 'cloud1-4gwqwv78b04dcc86',
                                })
                                c1.init()
                                    //回调
                                callback(c1)
                            };
                            //回调使用完成初始化后，即可访问云数据库
                            callback = function(c1) {
                                const db = c1.database();
                                db.collection('applicationform').where({
                                    status: 1
                                }).get({
                                    success: wxres => {
                                        console.log(wxres.data);
                                        that.info = that.info.concat(wxres.data);
                                    },
                                    failed: wxres => {
                                        console.log(wxres);
                                    }
                                })
                            };
                            first(callback);

                            // js的数组拼接方法
                            // 方法一：concat方法拼接（返回一个新数组）
                            // var a1 = [1,2,3,4,5];
                            // var a2 = ['a','b','c'];
                            // var newa = a1.concat(a2);
                            // 结果类型：object



                        } else if (res.error_code == 1) {
                            console.log(res.msg);
                        } else if (res.error_code == -1) {
                            console.log(res.msg);
                        }
                    },
                    error(res) {
                        console.log('请求失败' + res)
                    },
                    complete() {
                        that.$Loading.finish();
                        that.spinShow = false
                    }
                })
            },

        },
        watch: {
            info: {
                immediate: true,
                handler(newValue, oldValue) {
                    this.showinfo = this.info;
                }
            },
            searchkey: {
                immediate: true,
                handler(newValue, oldValue) {
                    this.showinfo = this.info.filter((p) => {
                        return (p.name.indexOf(newValue) !== -1) || (p.certificate_id.indexOf(
                            newValue) !== -1);
                    })
                }
            },
            haveOptionsData: {
                handler(newValue, oldValue) {
                    var that = this;
                    console.log(that.haveOptionsData);
                    if (that.haveOptionsData.length > 0) {
                        that.showOneInfo = that.haveOptionsData[that.$refs['pages'].currentPage - 1]
                    } else {
                        that.showOneInfo = {};
                    }
                }
            },
            showOneInfo: {
                handler(newValue, oldValue) {
                    console.log(this.showOneInfo);
                }
            },
            passport_type: {
                handler(newValue, oldValue) {
                    console.log(this.passport_type);
                }
            }
        },
        mounted: function() {
            this.getData();
        }
    })
</script>